<template>
  <button
    :class="buttonClasses"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'HjrButton',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    buttonClasses() {
      return [
        'hjr-button',
        `hjr-button--${this.type}`,
        `hjr-button--${this.size}`,
        {
          'hjr-button--disabled': this.disabled
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.hjr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
  outline: none;
}

.hjr-button:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* 尺寸 */
.hjr-button--small {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.hjr-button--medium {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.hjr-button--large {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.5;
}

/* 类型 */
.hjr-button--default {
  color: #333;
  background-color: #fff;
  border-color: #ddd;
}

.hjr-button--default:hover:not(.hjr-button--disabled) {
  color: #667eea;
  border-color: #667eea;
}

.hjr-button--primary {
  color: #fff;
  background-color: #667eea;
  border-color: #667eea;
}

.hjr-button--primary:hover:not(.hjr-button--disabled) {
  background-color: #5a6fd8;
  border-color: #5a6fd8;
}

.hjr-button--success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.hjr-button--success:hover:not(.hjr-button--disabled) {
  background-color: #218838;
  border-color: #1e7e34;
}

.hjr-button--warning {
  color: #fff;
  background-color: #ffc107;
  border-color: #ffc107;
}

.hjr-button--warning:hover:not(.hjr-button--disabled) {
  background-color: #e0a800;
  border-color: #d39e00;
}

.hjr-button--danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.hjr-button--danger:hover:not(.hjr-button--disabled) {
  background-color: #c82333;
  border-color: #bd2130;
}

/* 禁用状态 */
.hjr-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hjr-button--disabled:hover {
  transform: none;
}
</style>
